<template>
	<view>
		<view class="search_box dis_fx fx_column fx_between">
			<view class="search dis_fx fx_column flex1">
				<view class="icon"></view>
				<input type="text" @confirm="getSearchList" confirm-type="search" placeholder="请输入您要搜索的目的地" v-model="keywords" placeholder-style="color: #D0D0D0">
			</view>
			<button @click="getSearchList">搜索</button>
		</view>
		<view class="search_item" v-if="searchList.length<1">
			<view class="tit">历史搜索</view>
			<view class="item" @click="tabSearch('武汉')">武汉</view><view class="item">内蒙古</view><view class="item">新加坡</view><view class="item">丽江</view>
			<view class="item">香港</view><view class="item">秦皇岛</view><view class="item">澳门</view><view class="item">马鞍山</view>
		</view>
		<view class="search_item"  v-if="searchList.length<1">
			<view class="tit">推荐搜索</view>
			<view class="item" @click="tabSearch('武汉')">武汉</view><view class="item">内蒙古</view><view class="item">新加坡</view><view class="item">丽江</view>
			<view class="item">香港</view><view class="item">秦皇岛</view><view class="item">澳门</view><view class="item">马鞍山</view>
		</view>
		<view class="rel_item" v-if="searchList.length>0">
			<view class="item" v-for="item in searchList"  @click="toNewPage('/pages/attractionsDetail/attractionsDetail?productId='+item.productId)">
				<view class="img_box">
					<image :src="item.productMasterDiagram"></image>
				</view>
				<view class="tit dis_fx fx_column">
					<view class="type">{{item.productTypeName}}</view><text class="">{{item.productName}}</text>
				</view>
				<view class="price text_right">￥{{item.minPrice}}元起</view>
			</view>
		</view>
		<!-- 提示 -->
		<view class="dialog_box prompt_dialog" v-if="tost">
			<view class="dialog_con">
				<view class="dialog dis_fx fx_center_column fx_column">
					<view class="dis_fx fx_column prompt">非常抱歉！</view>
					<view class="dis_fx fx_column prompt">暂时还没有这个目的地！</view>
					<view class="btn" @click="closeToast">知道了</view>
				</view>
				<view class="close_btn" @click="closeToast"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				keywords:'',
				tost:false,
				searchList:[]
			}
		},
		methods: {
			toNewPage(url) {
				uni.navigateTo({url});
			},
			//搜索推荐搜索或搜索历史
			tabSearch(keywords){
				this.keywords=keywords;
			},
			//关闭提示框
			closeToast(){
				this.tost=false;
			},
			//获取搜索列表
			getSearchList(){;
				var that=this
				var params={}
				if(that.keywords){
					params={
						keywords:that.keywords,
						rows:8,
						page:1
					}
				}else{
					params={
						rows:8,
						page:1
					}
				}
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				util.fetchPost('/api/product/search',params,function(success){
					console.log(success)
					if(success.data && success.data.length>0){
						that.searchList=success.data;
					}else{
						that.tost=true;
					}
					uni.hideLoading();
				},function(error){
					
				},false)
			}
		}
	}
</script>

<style>
.search_box {
	background: #fff;
	padding: 40upx 24upx 25upx;
}

.search_box .search {
	width: 100%;
	height: 70upx;
	border-radius: 35upx;
	background: #F1F1F1;
	padding: 0 30upx;
}

.search_box .search input {
	font-size: 28upx;
	flex: 1;
}

.search_box .search .icon {
	background: url() no-repeat center/contain;
	width: 25upx;
	height: 30upx;
	margin-right: 20upx;
}
.search_box button{
	color: #FFC800;
	font-size: 32upx;
	background: 0 none;
	padding: 0;
	margin-left: 20upx;
}
.search_box button:after{
	border: 0 none;
	width: auto;
}
.search_item{
	padding: 0 15upx;
	margin-bottom: 20upx;
}
.search_item .tit{
	padding: 15upx;
	color: #999999;
	font-size: 28upx;
}
.search_item .item{
	background: #F1F1F1;
	color: #999999;
	font-size: 24upx;
	border-radius: 6upx;
	height:40upx;
	line-height: 40upx;
	padding: 0 15upx;
	display: inline-block;
	margin: 15upx;
}
.prompt_dialog .prompt{
	font-size: 32upx;
	color: #333;
}
.prompt_dialog .btn{
	width: 560upx;
	height: 80upx;
	line-height: 80upx;
	background: #FFC800;
	color: #fff;
	border-radius: 40upx;
	text-align: center;
	font-size: 32upx;
	margin-top: 80upx;
}
.rel_item{
	padding: 0 24upx;
}
.rel_item .item {
	box-shadow: 0 0 18px 0px rgba(106, 79, 13, 0.12);
	margin-bottom: 20upx;
	padding-bottom: 40upx;
}

.rel_item .item image {
	width: 100%;
	height: 320upx;
	border-radius: 5px 5px 0 0;
}

.rel_item .item .tit {
	padding: 35upx 24upx;
}

.rel_item .item .tit text {
	color: #333333;
	font-size: 28upx;
}

.rel_item .item .tit .type {
	background: #FC5C1D;
	color: #fff;
	width: 140upx;
	height: 46upx;
	border-radius: 23upx;
	font-size: 24upx;
	text-align: center;
	line-height: 46upx;
	margin-right: 20upx;
}

.rel_item .item .price {
	font-size: 36upx;
	color: #FFC800;
	padding: 0 34upx;
}
</style>
